<template>
    <el-row class="home" :gutter="20">
        <el-tabs v-model="activeName" @tab-click="handleClick" type="border-card">
            <!--全部-->
            <el-tab-pane label="全部" name="all">
                <el-card >
                    <el-table
                            ref="multipleTable"
                            :data="tableData"
                            tooltip-effect="dark"
                            style="width: 100%"
                            @selection-change="handleSelectionChange">
                        <el-table-column
                                type="selection"
                                width="55">
                        </el-table-column>
                        <el-table-column
                                prop="username"
                                label="用户名"
                                width="300"
                                align="center"
                                show-overflow-tooltip>
                        </el-table-column>
                        <el-table-column
                                prop="userStatus"
                                label="状态"
                                width="70"
                                align="center">
                        </el-table-column>
                        <el-table-column
                                label="操作"
                                align="center">
                            <template slot-scope="scope">
                                <el-button @click="deleteUser(scope.row)" type="danger" icon="el-icon-delete" size="small">删除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-card>
            </el-tab-pane>
        </el-tabs>
    </el-row>
</template>

<script>
    //axios
    import axios from 'axios'


    export default {
        name: "ProblemManage",
        data() {
            return {
                tableData: [],
                myTableDate: [],
                form: {},
                multipleSelection: [],
                activeName: 'all',
                ids: '',
                qcollection: [], //题目集列表
                token: '',
                role: ''
            }
        },

        methods: {
            toggleSelection(rows) {
                this.$refs.multipleTable.clearSelection();
            },
            handleSelectionChange(val) {
                this.multipleSelection = val;
            },
            handleClick(row) {
                console.log(row);
            },

            //当前选中值的id
            indexChange(sels){
                this.ids = '';
                var ids = sels.map(it=>it.id);
                for(var i = 0; i < ids.length; i++){
                    console.log(ids[i])
                    this.ids = (i == 0) ? this.ids + ids[i] : this.ids + '&' + ids[i];
                }
            },

            //删除题目
            deleteUser(data){
                //发送请求
                var that = this;
                if(this.ids == '' && data != null){
                    this.ids = data.userId;
                }

                //发送请求
                /*
                    接口: 删除用户
                    请求地址: http://localhost:8881/producer/user/delete
                    请求方法: get
                    请求参数: id，使用&连接
                    响应内容: 响应结果
                */
                axios({
                    method: 'get',
                    url: 'http://localhost:8881/producer/user/delete',
                    params: {
                        ids: this.ids
                    },
                    headers: {
                        token: this.token
                    }
                }).then(function (response) {
                    var res = response.data;
                    if(res.code == 200){
                        that.$message.success('删除成功！');
                        //跳转页面
                        //that.$router.push('/home')
                    }else{
                        that.$message.error('删除失败！');
                    }
                }).catch(function (error) {
                    console.log(error);
                });
            }
        },

        created: function () {

            var that = this;
            let token = localStorage.getItem('token');
            this.token = token;

            //全部
            /*
                接口: 获取全部用户
                请求地址: http://localhost:8881/producer/question/select
                请求方法: post
                请求参数: 查询条件
                响应内容: 响应结果
            */
            axios({
                method: 'post',
                url: 'http://localhost:8881/producer/user/select',
                data: {},
                headers: {
                    token: token
                }
            }).then(function (response) {
                var res = response.data;
                if(res.code == 200){
                    that.tableData = res.data.userList;
                    that.$message.success('数据获取成功！');
                }else{
                    that.$message.error('数据获取失败！');
                }
            }).catch(function (error) {
                console.log(error);
            });
        }
    }
</script>

<style scoped>
    .up-box, .down-box{
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
</style>